import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table ,Input,Button,Modal,Row,Col,Pagination,InputNumber,Popconfirm,Divider,message} from 'antd';
import styles from './index.less';
const Pages = ({ evacuate, dispatch, loading }) => {
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            width:50,
        },
        {
            title: '位置名称',
            dataIndex: 'location',
            align:'left',
        },
        {
            title: '疏散对象',
            dataIndex: 'object',
            align:'left',
        },
        {
            title: '面积',
            dataIndex: 'area',
            align:'left',
            width:50,
        },
        {
            title: '操作',
            dataIndex: 'option',
            width:100,
            render: (text,record) =><div>
                <Popconfirm title="确定移除?" onCancel={()=>{}} onConfirm={
                    ()=> dispatch({type:"evacuate/deleteEvacuate",payload:{id:record.id}})
                } okText="是" cancelText="否">
                    <a style={{color:"red"}}>删除</a>
                </Popconfirm>
                <Divider type="vertical" />
                <a onClick={()=>{
                    dispatch({type:"evacuate/save",payload:{record:record,visible:true}});
                }}>修改</a>
            </div>,
        },
    ];
    return(
        <div className={styles.container}>
            <PagesGET dispatch={dispatch} {...evacuate} loading={loading.global}/>
            <Table columns={columns}
                size="small"
                pagination={false}
                rowKey={id=>id.id}
                loading={loading.global}
                dataSource={evacuate.getEvacuateData||null} />
            <Pagination current={evacuate.pages} showTotal={total => `共计 ${total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={evacuate.total}
                onChange={pages => { !loading.global && dispatch({type:'evacuate/save',payload:{pages:pages}});}}/>
        </div>
    );
};


class PagesGET extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            location:"",
            object:"",
            locationAdd:'',
            objectAdd:'',
            area:'',
            remark:'',
        };
    }
    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({type:"evacuate/getEvacuate",payload:{
            location:'',
            object:'',
            pageNumber :1,
            pageSize :10,
        }});
    }

    render (){
        let {pages,dispatch,visible ,record,loading} = this.props;
        return(
            <div className={styles.containerit}>
                <Input value={this.state.location} placeholder="位置名称" style={{margin:10,width:256}} onChange={e=>this.setState({location:e.target.value})}/>
                <Input value={this.state.object} placeholder="疏散对象" style={{margin:10,width:256}} onChange={e=>this.setState({object:e.target.value})}/>
                <Button type='primary' onClick={()=>{
                    dispatch({type:"evacuate/getEvacuate",payload:{
                        location:this.state.location,
                        object:this.state.object,
                        pageNumber :pages,
                        pageSize :10,
                    }});
                }
                }>查询</Button>
                <Button style={{marginLeft:10}} onClick={()=>{
                    this.setState({
                        location:'',
                        object:'',
                    });
                }
                }>重置</Button>
                <Button style={{margin:10}} onClick={()=>{
                    this.setState({
                        locationAdd:'',
                        objectAdd:'',
                        area:'',
                        remark:'',
                    });
                    dispatch({type:"evacuate/save",payload:{visible:true,record:{}}});
                }
                }>新增应急疏散场所</Button>
                <Modal
                    title={record.id?"修改应急疏散场所":'新增应急疏散场所'}
                    confirmLoading={loading}
                    visible={visible}
                    onOk={()=>{
                        let {locationAdd,objectAdd,area,remark} = this.state;
                        if(locationAdd && objectAdd){
                            if (!record.id){
                                dispatch({type:"evacuate/postEvacuate",payload:{
                                    location:locationAdd,
                                    object:objectAdd,
                                    area:area,
                                    remark:remark,
                                }});
                            }else {
                                dispatch({type:"evacuate/putEvacuate",payload:{
                                    id:record.id,
                                    location:locationAdd,
                                    object:objectAdd,
                                    area:area,
                                    remark:remark,
                                }});
                            }
                        }else {
                            message.error('请填写完整！');
                        }
                    }}
                    onCancel={()=>dispatch({type:"evacuate/save",payload:{visible:false,record:{}}})}
                >
                    <Row>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>位置名称:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({locationAdd: e.target.value})}
                                value={this.state.locationAdd}
                                placeholder="位置名称"/>
                        </Col>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>疏散对象:</span></Col>
                        <Col span={14}>
                            <Input.TextArea style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({objectAdd: e.target.value})}
                                value={this.state.objectAdd}
                                placeholder="疏散对象"/>
                        </Col>
                        <Col span={6}><span>面积大小:</span></Col>
                        <Col span={14}>
                            <InputNumber style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={value => this.setState({area: value})}
                                value={this.state.area}
                                placeholder="面积大小"/>
                        </Col>
                        <Col span={6}><span>备注信息:</span></Col>
                        <Col span={14}>
                            <Input.TextArea style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({remark: e.target.value})}
                                value={this.state.remark}
                                placeholder="备注信息"/>
                        </Col>
                    </Row>
                </Modal>
            </div>
        );
    }
    componentWillReceiveProps (nextProps) {
        if(nextProps.pages !== this.props.pages){
            let {location,object} = this.state;
            this.props.dispatch({type:"evacuate/getEvacuate",payload:{
                location:location,
                object:object,
                pageNumber :1,
                pageSize :10,
            }});
        }
        if (nextProps.record.id !== this.props.record.id) {
            let {object,location,area,remark} = nextProps.record;
            this.setState({
                locationAdd:location,
                objectAdd:object,
                area:area,
                remark:remark,
            });
        }
    }
}


Pages.propTypes = {
    evacuate: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ evacuate, loading }) => ({ evacuate, loading }))(Pages);